<template>
  <div class="address">
    <div class="text">
      <!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
      <ul v-if="finalAddress">
        <li>
          <span>收<i />货<i />人：</span>{{ finalAddress.receiver }}
        </li>
        <li>
          <span>联系方式：</span
          >{{
            finalAddress.contact.replace(/(\d{3})\d{4}(\d{4})/g, `$1****$2`)
          }}
        </li>
        <li>
          <span>收货地址：</span>
          {{ finalAddress.fullLocation }}
          {{ finalAddress.address }}
        </li>
      </ul>
      <a href="javascript:" @click="modifyAddress">修改地址</a>
    </div>
    <div class="action">
      <XtxButton class="btn" @click="switchAddress">切换地址</XtxButton>
      <XtxButton class="btn" @click="addAddress">添加地址</XtxButton>
    </div>
    <AddressEdit
      ref="addressEditInstance"
      @onAddressChanged="updateUserSelectedAddress"
    ></AddressEdit>
    <AddressSwitch
      ref="addressSwitchInstance"
      @onAddressChanged="updateUserSelectedAddress"
      :list="addresses"
      :activeAddressId="finalAddress?.id"
    ></AddressSwitch>
  </div>
</template>
<script>
import AddressEdit from "@/views/pay/components/AddressEdit";
import { computed, ref } from "vue";
import { getAddressList } from "@/api/order";
import AddressSwitch from "@/views/pay/components/AddressSwitch";
export default {
  name: "CheckoutAddress",
  components: { AddressEdit, AddressSwitch },
  setup() {
    // 添加组件实例
    const addressEditInstance = ref();
    // 切换地址组件实例
    const addressSwitchInstance = ref();
    // 添加收货地址
    const addAddress = () => {
      addressEditInstance.value.visible = true;
    };
    // 获取收货地址
    const { getData, finalAddress, updateUserSelectedAddress, addresses } =
      getAddresses();
    getData();

    // 修改收货地址
    const modifyAddress = () => {
      const { fullLocation, isDefault, ...rest } = finalAddress.value;
      // 保存选择的城市信息
      setTimeout(() => {
        addressEditInstance.value.xtxCityInstance.location = fullLocation;
      }, 0);
      // 保存收货人信息
      addressEditInstance.value.address = { ...rest };
      // 转换默认收货地址格式
      addressEditInstance.value.isDefault = isDefault === 0;
      // 显示模态框
      addressEditInstance.value.visible = true;
    };
    // 切换收货地址
    const switchAddress = () => {
      // 显示切换地址模态框
      addressSwitchInstance.value.visible = true;
    };
    return {
      addressEditInstance,
      addAddress,
      addresses,
      finalAddress,
      updateUserSelectedAddress,
      addressSwitchInstance,
      modifyAddress,
      switchAddress,
    };
  },
};
// 获取收货地址
function getAddresses() {
  // 用于保存收货地址列表
  const addresses = ref();
  const getData = (callback) => {
    getAddressList().then((data) => {
      addresses.value = data.result;
      // 在调用 getData 方法的时候如果传递了callback 就调用callback并传递最新的收货地址列表
      callback && callback(data.result);
    });
  };
  // 计算要显示的收货地址
  // 用户刚选择的收货地址优先显示,没有则显示默认收货地址,没有则显示第一个收货地址,没有添加收货地址
  // 1. 用于存储用户新选择的收货地址
  const userSelectedAddress = ref();
  // 计算收货地址
  const finalAddress = computed(() => {
    // 显示地址
    let result = null;
    //1.  如果新增了收货地址
    if (userSelectedAddress.value) {
      result = userSelectedAddress.value;
    } else {
      // 查看收货地址列表中是否存在收货地址
      if (addresses.value && addresses.value.length > 0) {
        // 2.没有新增收货地址,则查找默认地址
        result = addresses.value.find((item) => item.isDefault === 1);
        // 没有默认地址则选择第一个收货地址
        if (!result) {
          result = addresses.value[0];
        }
      }
    }
    return result;
  });
  // 更新收货地址
  const updateUserSelectedAddress = (id) => {
    getData((list) => {
      userSelectedAddress.value = list.find((item) => item.id === id);
    });
  };
  return {
    getData,
    addresses,
    finalAddress,
    updateUserSelectedAddress,
  };
}
</script>
<style scoped lang="less">
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: @xtxColor;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
</style>
